<template>
	<view style="background-color: #e5e5e5;min-height:1300rpx;">
		<u-form labelPosition="left" ref="form1" class="addForm">
			<u-form-item label="VIN码" prop="lsh" borderBottom ref="item1" class="u-form-item" :label-width="100">
				<u-input prefixIcon="search" prefixIconStyle="font-size: 16px;color: #909399" v-model="lsh"
					placeholder="请输入VIN码" type="text" name="lsh"></u-input>
					<u-button type="primary" size="mini" @click="scanBar">
						<u-icon name="scan"  size="38"></u-icon>
					</u-button>
			</u-form-item>
			
			<view class="mytabs">
				<u-tabs 
				:list="constData" 
				name="title" 
				:is-scroll="false"
				:bold="true"
				:current="current" 
				@change="change"></u-tabs>
			</view>

			<view v-for="(items,i) in constData" v-if="current==i">
				
				<view v-for="(item,p) in items.items" class="addView">	
					<view class="itemTitle" style="display: flex;">
						<view style="width: 20rpx;">
							<text style="color: red;" v-if="item.required">*</text>
						</view>
						{{p+1}}.{{item.title}}	
					</view>
					<u-upload
						:action="action" 
						:show-tips="false"
						:index ="item.values"
						:header="header"
						on-error="onError"
						:multiple="true"
						:before-upload="beforeUpload"
						:maxCount="10"
						@on-uploaded="onUploaded"
					
						@on-success="onSuccess">
			
		
			
			
					</u-upload>	
					
				</view>	
					
					
			</view>	
				
		</u-form>
		<view class="u-form-item"
			style="position: fixed;bottom: 0;background-color: #FFFFFF;padding: 15px;width: 100%;text-align: center;">
			<u-button type="primary" @click="submit" shape="square" size="medium" :ripple="true"
				ripple-bg-color="#909399">
				<u-icon name="checkmark-circle-fill" style="padding-right: 15rpx;"></u-icon>
				提交
			</u-button>
		</view>

		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->

	</view>

</template>


<script>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           

	export default {
		data() {
			return {
				userinfo: null,
				pp:null,
				photoList: [],
				lsh: '',
				current: 0,
				constData:constData,
				header: {
					Accept: 'application/json, text/plain, */*',
					contentType:'application/json;charset=UTF-8',  //设置后
					Authorization: this.$store.state.vuex_token
				},
				action: this.$u.http.config.baseUrl + '/common/upload', //你的图片服务器地址
			}
		},
		methods: {
			change(index) {
							this.current = index;
						},
			scanBar(){
				 var self = this;
				// 调起条码扫描
				uni.scanCode({
					scanType: ['barCode'],
					success: function (res){
						self.lsh=res.result

					}
				});
			},
			onUploaded(lists, name){
				var phots=new Array();
				for (var i = 0; i < lists.length; i++) {
					console.log(lists)
					var photoInfo={
						fileName:lists[i].response.fileName,
						newFileName:lists[i].response.newFileName,
						originalFilename:lists[i].response.originalFilename,
						thumbFile:lists[i].response.thumbFile,
						thumbFileUrl:lists[i].response.thumbFileUrl,
						url:lists[i].response.url
						}
						
			
						phots.push(photoInfo)
				}
				
				for (var i = 0; i < this.photoList.length; i++) {
					for (var p = 0; p < this.photoList[i].items.length; p++) {
					
						if(this.photoList[i].items[p].categoryName==name){	
							this.photoList[i].items[p].photos=phots
						}
					}

				}
					
			},
			onSuccess(data, index, lists, name) {
				
				
			},
		
			
			beforeUpload(index, list) {
				return true
			},
			onError(res, index, lists, name) {
				console.log(res)
			},
			onReady() {
		
			},
			submit() {
				this.add()		
			},
		onRemove(index, lists){
			console.log('图片已被移除')
		},
		add() {
			if(this.lsh===""){
				this.$u.toast("请先扫描输入VIN码！");
			}else{
				var photos = JSON.stringify(this.photoList)
				
				
				this.$u.api.energy.addPho({
						lsh: this.lsh,
						photos,
						uid: this.userinfo.userId,
						nickname: this.userinfo.nickName,
						createtime: new Date().toISOString().slice(0, 10)
					})
					.then(res => {
						if (res.code == 200) {
							this.lsh=""
							this.photoList=""
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel:false
							});
						}
					});
			}
			

		},
		getUserInfo() {
			this.userinfo = this.vuex_user
		},
		initPhoData(){
			var pArr=new Array();
			for (var i = 0; i < constData.length; i++) {
				var categoryArr={
					categoryName:constData[i].values,
					categoryTitle:constData[i].title,
					items:[],
				} 
				var itemsArrOld=constData[i].items
				for (var p = 0; p < itemsArrOld.length; p++) {
					var photObj={
							categoryName:itemsArrOld[p].values,
							categoryTitle:itemsArrOld[p].title,
							required:itemsArrOld[p].required,
							photos:[]
						} 
					categoryArr.items.push(photObj)
				}
				
				pArr.push(categoryArr)
			}
			this.photoList=pArr
			console.log(this.photoList)
		}
	},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.getUserInfo();
			this.initPhoData();
		}
	}
</script>

<style scoped lang="scss">
	.addForm {
		padding: 10rpx;

		.u-form-item {
			background-color: #fff;
			margin: 15rpx 25rpx 5rpx 25rpx;
			padding: 15rpx;
			border-radius: 3rpx;
			box-shadow: 3px 3px 3px #999;
			font-size: 16px;
		}

	}
	.addView{
		background-color: #fff;
		margin: -10px 13px 2px 13px;
		padding: 15rpx;
		font-size: 20rpx;
		color: #999;	
		border-radius: 3rpx;
		box-shadow: 3px 3px 3px #999;
	}
	.itemTitle{
		margin: 15rpx 0;
		color: $u-main-color;
		font-size: 30rpx;
	}
	.mytabs{
		margin-top: 15rpx;
		padding: 25rpx;
	}
</style>
